<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }">通用大数据框架智能计算引擎优化仿真平台</el-breadcrumb-item>
    <el-breadcrumb-item>计算任务</el-breadcrumb-item>
    <el-breadcrumb-item>优化方案管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable  @clear="getManagementList">
          <el-button slot="append" icon="el-icon-search" @click="getManagementList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="dialogVisible = true">添加优化方案</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="addFileVisble = true">上传文件</el-button>
      </el-col>
    </el-row>
    <el-table
        :data="test"
      border
      style="width:100%">
      <el-table-column
        prop="managementID"
        label="方案ID"
        width="200">
      </el-table-column>
      <el-table-column
          prop="Name"
          label="优化方案名称"
          width="200">
      </el-table-column>
      <el-table-column
          prop="Time"
          label="上传时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="Person"
          label="上传人"
          width="200">
      </el-table-column>
      <el-table-column
          prop="operate"
          label="操作"
          width="360">
        <template v-slot="scope">
          <el-tooltip class="item" effect="dark" content="下载文件" placement="top">
            <el-button type="primary" icon="el-icon-download"  @click="RescouresDown(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑文件" placement="top">
            <el-button type="primary" icon="el-icon-edit" @click="editRescoures(scope.row)" ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除文件" placement="top">
            <el-button type="danger" icon="el-icon-delete"  @click="removeRescoures(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination

        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10,20,30]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>
  <el-dialog
    title="编辑文件"
    :visible.sync="editRescouresVisble"
    width="30%"
    :before-close="handleClose"

    >
    <el-form :model="editUserParams" :rules="editUserFormRul" ref="editUserFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="方案ID" prop="managementID" >
        <el-input v-model="editUserParams.managementID"  ></el-input>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog
      title="添加优化方案"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <el-form :model="editUserParams" :rules="editUserFormRul" ref="editUserFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="方案ID" prop="managementID" >
        <el-input v-model="editUserParams.managementID"  ></el-input>
      </el-form-item>
      <el-form-item label="优化方案名称" prpo="Name">
        <el-input v-model="editUserParams.Name" ></el-input>
      </el-form-item>
      <el-form-item label="上传时间" prpo="Time" >
        <el-input v-model="editUserParams.Time" ></el-input>
      </el-form-item>
      <el-form-item label="上传人" prop="Person" >
        <el-input v-model="editUserParams.Person" ></el-input>
      </el-form-item>
    </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
  </el-dialog>
  <el-dialog
      title="上传文件"
      :visible.sync="addFileVisble"
      width="20%"
  >
    <el-form label-width="20%" class="demo-ruleForm">
      <el-select v-model="value" filterable multiple placeholder="请选择文件类型" style="margin-bottom: 20px;">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
      <el-upload
          class="upload-demo"
          ref="upload"
          action="http://localhost:8082/uploadFile"
          :accept= "value.join()"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          multiple
          :file-list="fileList"
          :auto-upload="false"
      >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitupload">上传到服务器</el-button>
      </el-upload>
    </el-form>
    <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="addFileVisble = false">完成</el-button>
     </span>
  </el-dialog>

</div>
</template>

<script>
export default {
  data(){
    return {
      editRescouresVisble :false,
      filename:"",
      queryInfo:{
        //查询
        query:'',
        pagenum:1,
        pagesize:10
      },
      total:0,
      dialogVisible: false,
      addFileVisble: false,
      fileList: [],
      options: [
          {value: '.txt', label: '文本文档'},
          {value: '.docx', label: 'word文档'},
          {value: '.xlsx', label: '表格'},
          {value: '.py', label: 'python文件'}
      ],
      value: [],
      editUserParams:{
      },
      editUserFormRul:{
      },
      ResourcesList :[],
      test:[
        {
          resourcesid:'01',
          managementID :'1',
          Name :'test01',
          Time :'2022-3-5',
          Person :'小王',
          path :''
        },
        {

          resourcesid:'02',
          managementID :'2',
          Name :'test02',
          Time :'2022-3-5',
          Person :'小王',
          path :''
        }

      ],

    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
    },
    getManagementList(){

      this.ResourcesList = this.test
      this.total = 0
    },
    CurrentChange(newnumber){
      this.queryInfo.pagenum = newnumber
      this.getUserList()
    },
    SizeChange(newsize){
      this.queryInfo.pagesize = newsize
      this.getUserList()
    },
    RescouresDown(row){
      var name = row.resourcesname;
      var url = row.path;
      const a = document.createElement('a')
      a.setAttribute('download', name)
      a.setAttribute('target', '_blank')
      a.setAttribute('href', "api"+url)
      a.click()
    },
    editRescoures(row){
      this.editUserParams = row
      this.editRescouresVisble = true
    },
    removeRescoures(row){
      // 提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
      this.$confirm('此操作将永久删除'+row.resourcesname+', 是否继续?', '删除文件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/${row.resourcesid}`).then(res=>{
          if(res.data.meta.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getResourcesList()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    closeediRescouresDialog(){
      this.$refs.editUserFormRef.resetFields()
    },
    //上传文件
    submitupload() {
      this.$refs.upload.submit()
    },

    //文件上传成功提示
    uploadSuccess(res){
      console.log(res)
      this.$message.success('文件上传成功')
    },
    //文件上传失败提示
    uploadError(err){
      console.log(err)
      this.$message.error("文件上传失败")
    }


  },

  name: "optimizeschememanagement"
}
</script>

<style scoped>

</style>